<template>
	<div class="user-set">
		<div class="set-cont">
			<div class="set-nav">
				<div class="set-avatar">
					<el-image style="width: 100%; height: 100%" :src="userInfo.avatar" fit="cover"></el-image>
				</div>
				<div class="user-name">{{userInfo.nickName}}</div>
				<div class="nav-title">账户管理</div>
				<div class="user-nav">
					<div class="user-nav-item user-active">
						<div class="nav-icon">
							<!-- <img v-if="navActive != 1" src="../assets/img/user_icon1.png" alt=""> -->
							<img src="../assets/img/user_icon1_active.png" alt="">
						</div>
						<span>我的信息</span>
					</div>
					<div class="user-nav-item" @click="goPage(2)">
						<div class="nav-icon">
							<img src="../assets/img/user_icon2.png" alt="">
						</div>
						<span>我的学习</span>
					</div>
					<div class="user-nav-item" @click="goPage(3)">
						<div class="nav-icon">
							<img src="../assets/img/user_icon3.png" alt="">
						</div>
						<span>我的错题</span>
					</div>
					<div class="user-nav-item" @click="goPage(4)">
						<div class="nav-icon">
							<img src="../assets/img/user_icon4.png" alt="">
						</div>
						<span>我的考试</span>
					</div>
					<div class="user-nav-item" @click="goPage(5)">
						<div class="nav-icon">
							<img src="../assets/img/user_icon5.png" alt="">
						</div>
						<span>我的竞赛</span>
					</div>
					<div class="user-nav-item" @click="goPage(6)">
						<div class="nav-icon">
							<img src="../assets/img/user_icon6.png" alt="">
						</div>
						<span>模拟考试</span>
					</div>
				</div>
			</div>
			<div class="set-content">
				<div class="hint">
					<el-alert
						:title="'用户ID：' + userInfo.userName +  ',  上次登录时间：' + (userInfo.loginDate ? userInfo.loginDate: '暂无') "
						type="warning" show-icon>
					</el-alert>
				</div>
				<div class="set-form">
					<el-form ref="ruleForm" :rules="rules" :model="userInfo" label-width="100px">
						<el-form-item label="头像：">
							<el-upload action="http://119.91.149.205:19125/info/api/cc/upload/common/upload" class="avatar-uploader"
								ref="upload" :show-file-list="false" :on-success="handleAvatarSuccess">
								<!-- <img v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar"> -->
								<el-image v-if="userInfo.avatar" style="width: 100%; height: 100%" :src="userInfo.avatar"
									fit="cover"></el-image>
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</el-form-item>
						<el-form-item label="学号：" prop="userName">
							<el-input :disabled="true" v-model="userInfo.userName"></el-input>
						</el-form-item>
						<el-form-item label="真实姓名：" prop="nickName">
							<el-input v-model="userInfo.nickName"></el-input>
						</el-form-item>
						<el-form-item label="身份证号：" prop="cardNumber">
							<el-input v-model="userInfo.cardNumber"></el-input>
						</el-form-item>
						<el-form-item label="所在地：">
							<el-input v-model="userInfo.address"></el-input>
						</el-form-item>
						<el-form-item label="所在省份" prop="provinceId">
							<el-select :disabled="true" v-model="userInfo.provinceId" placeholder="请选择所在省份" @change="provinceChange">
								<el-option v-for="item in provinceList" :label="item.deptName" :value="item.deptId"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="所在院校" prop="deptId">
							<el-select :disabled="true" v-model="userInfo.deptId" placeholder="请选择所在院校">
								<el-option v-for="item in school" :label="item.deptName" :value="item.deptId"></el-option>
							</el-select>

						</el-form-item>
						<el-form-item label="入学时间" prop="enrollmentTime">
							<el-date-picker :disabled="true" v-model="userInfo.enrollmentTime" type="date" placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="指导老师" prop="guidanceTeacher">
							<el-input v-model="userInfo.guidanceTeacher"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		getProvinceApi,
		getSchoolApi,
		upLoadApi,
		saveUserInfoApi
	} from '@/api/Login'
	import {
		getUserInfoApi
	} from '@/api/UserInfo'
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.params.userPwd !== '') {
						this.$refs.ruleForm.validateField('checkPass');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.params.userPwd) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				params: {},
				userInfo: this.$cookies.get('sy_userInfo'),
				imageUrl: '',
				province: '',
				provinceList: [],
				school: [],
				rules: {
					email: [{
						required: true,
						message: '请输入正确邮箱',
						trigger: 'blur'
					}],
					userName: [{
						required: true,
						message: '请输入学号',
						trigger: 'blur'
					}],
					realName: [{
						required: true,
						message: '请输入真实姓名',
						trigger: 'blur'
					}],
					cardNumber: [{
						required: true,
						message: '请输入正确身份证号',
						trigger: 'blur'
					}],
					userPwd: [{
						required: true,
						validator: validatePass,
						trigger: 'blur'
					}],
					userPwdD: [{
						required: true,
						validator: validatePass2,
						trigger: 'blur'
					}],
					mobile: [{
						required: true,
						message: '请输入正确手机号',
						trigger: 'blur'
					}],
					deptId: [{
						required: true,
						message: '请选择所在院校',
						trigger: 'change'
					}],
					enrollmentTime: [{
						required: true,
						message: '请选择入学日期',
						trigger: 'blur'
					}],
					guidanceTeacher: [{
						required: true,
						message: '请填写指导老师',
						trigger: 'blur'
					}],
				},
			}
		},
		created() {
			this.getProvince()
			if (this.userInfo.provinceId) {
				this.getSchoolList()
			}
		},
		methods: {
			goPage(index) {
				this.$router.push({
					path: '/UserInfo?activeType=' + index
				})
			},
			provinceChange() {
				this.getSchoolList()
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						saveUserInfoApi(this.userInfo).then(res => {
							if (res.code == 200) {
								this.$notify({
									title: '保存成功',
									type: 'success'
								})
								this.getUserInfo()
							}
						})
					} else {
						return false;
					}
				});
			},
			getSchoolList() {
				getSchoolApi({
					deptid: this.userInfo.provinceId
				}).then(res => {
					this.school = res.data
					console.log(res)
				})
			},
			getUserInfo() {
				getUserInfoApi().then(res => {
					this.userInfo = res.data
					let avatar = res.data.avatar
					this.$store.commit('SET_AVATAR', avatar)
					this.$cookies.set('sy_avatar', avatar)
					this.$store.commit('SET_NICKNAME', res.data.nickName)
					this.$cookies.set('sy_username', res.data.nickName)
					this.$store.commit('SET_USERINFO', res.data)
					this.$cookies.set('sy_userInfo', res.data)
				})
			},
			getProvince() {
				getProvinceApi().then(res => {
					this.provinceList = res.data
				})
			},
			handleAvatarSuccess(response, file, fileList) {
				if (response.code == 200) {
					this.userInfo.avatar = response.url
					this.$notify({
						title: '上传成功',
						type: 'success'
					})
					this.$refs.upload.clearFiles()
				}
			},
		}
	}
</script>
<style lang="less" scoped>
	@contWidth: 1280px;

	.user-set {
		background-color: #F7F7F7;
		padding: 16px 0;
		min-height: calc(100vh - 120px);

		.set-cont {
			display: flex;
			width: @contWidth;
			margin: 0 auto;
		}

		.set-nav {
			width: 224px;
			// height: 329px;
			background: #FFFFFF;
			border-radius: 4px;
			margin-right: 16px;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 25px 16px 18px;
		}

		.set-avatar {
			width: 85px;
			height: 85px;
			border-radius: 85px;
			margin-bottom: 10px;
			overflow: hidden;
		}

		.user-name {
			font-size: 16px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #000000;
			margin-bottom: 29px;
		}

		.nav-title {
			width: 100%;
			padding: 10px 0;
			font-size: 16px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #000000;
			border-bottom: 1px solid #E7E7E7;
		}

		.user-nav {
			width: 100%;
			height: 247px;
			padding: 10px 0;
			background: #FFFFFF;
			border-radius: 4px;
			margin-right: 16px;
			overflow: hidden;
		}

		.user-nav-item {
			height: 38px;
			display: flex;
			align-items: center;
			padding-left: 25px;
			cursor: pointer;

			span {
				font-size: 14px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
		}

		.user-active {
			background-color: #2360FE;

			span {
				color: #fff;
			}
		}

		.nav-icon {
			width: 18px;
			height: 18px;
			margin-right: 10px;
		}

		.nav-list {
			width: 100%;
			padding-top: 20px;
		}

		.nav-item {
			height: 38px;
			display: flex;
			align-items: center;
			cursor: pointer;

			.set-nav-icon {
				width: 18px;
				height: 18px;
				margin-right: 10px;
				background: url(../assets/img/bind_icon.png)no-repeat;
				background-size: 100% 100%;
			}

			.user-nav-icon {
				width: 18px;
				height: 18px;
				margin-right: 10px;
				background: url(../assets/img/user_icon4.png)no-repeat;
				background-size: 100% 100%;
			}

			span {
				font-size: 14px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
		}

		.set-content {
			flex: 1;
			background: #FFFFFF;
			border-radius: 4px;
			padding: 18px 23px;
		}

		.set-form {
			width: 365px;
			padding: 10px 0;
		}

		::v-deep .avatar-uploader .el-upload {
			width: 85px;
			height: 85px;
			border-radius: 85px;
			border: 1px solid #ccc;
			cursor: pointer;
			position: relative;
			overflow: hidden;

		}


		::v-deep .avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		}

		::v-deep .avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 85px;
			height: 85px;
			line-height: 85px;
			text-align: center;
		}

		::v-deep .avatar {
			width: 85px;
			height: 85px;
			display: block;
		}

		::v-deep .el-select {
			width: 273px;
		}

		::v-deep .el-cascader {
			width: 273px;
		}

		::v-deep .el-date-editor.el-input,
		.el-date-editor.el-input__inner {
			width: 273px;
		}

		::v-deep .el-button {
			width: 273px;
		}
	}
</style>